<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  
</body>
<script>

  // requestAnimationFrame()

  // 根据显示器的刷新频率执行

  // 60hz

  // requestAnimationFrame( fn );
  // function fn(){
  //   console.log(1);
  //   requestAnimationFrame( fn );
  // }

  // setInterval(function(){
  //   console.log(1);
  // }, 1000 / 60)


  // requestAnimationFrame( fn );
  // let i=0;
  // function fn(){
  //   i++;
  //   if(i%60 === 0){
  //     console.log(1);
  //   }
  //   requestAnimationFrame( fn );
  // }

  // DOM能支持的最大刷新频率：1000 / 60
  // canvas能支持的最大刷新频率：1000 / 120

  // 60fps
  // 120fps

  // function fn(){
  //   // ...要重复执行的代码...
  //   requestAnimationFrame( fn );
  // }
  // requestAnimationFrame( fn );


  // 保存最新的屏幕刷新执行程序的返回值
  let t = requestAnimationFrame( fn );
  function fn(){
    console.log(1);
    t = requestAnimationFrame( fn );
  }

  document.onclick = function(){
    // 取消 跟随屏幕刷新执行的程序
    cancelAnimationFrame( t );
  }
  
</script>
</html>